<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>表单列表</title>
    <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all-neptune.css"/>
    <script type="text/javascript" src="../lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="../lib/gf/common_grid.js"></script>
</head>
<script type="text/javascript">
    Ext.Loader.setConfig({enabled: true});

    Ext.Loader.setPath('Ext.ux', '/ext4/ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
        'Ext.ModelManager',
        'Ext.tip.QuickTipManager'
    ]);
    var win, searchForm;
    Ext.onReady(function () {

        Ext.define( 'ModelList', {
            extend: 'Ext.data.Model',
            fields: [
                '_id','form_name','form_code','form_desc','updated_at'
            ],
            idProperty: '_id'
        });

        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            pageSize: 20,
            model: 'ModelList',
            remoteSort: true,
            proxy: {
                type: 'ajax',
                url: '/form/list',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'count'
                },
                simpleSortMode: true
            },
            sorters: [
                {
                    property: '_id',
                    direction: 'DESC'
                }
            ]
        });

        searchForm = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            region: 'north',
            defaultType: 'textfield',
            layout: {type: 'table',columns:3},
            items: [
                {fieldLabel: '表单编码',name: 'form_code',allowBlank: true},
                {fieldLabel: '表单名称',name: 'form_name',allowBlank: true}
            ]
        });

        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            loadMask: true,
            region: 'center',
            selModel: Ext.create('Ext.selection.CheckboxModel'),
            columns: [
                {text: "_id",dataIndex: '_id',hidden: true},
                {text: '表单编码',dataIndex: 'form_code',width:200},
                {text: '表单名称',dataIndex: 'form_name',width:200},
                {text: '表单描述',dataIndex: 'form_desc',width:200}
            ],
            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying {0} - {1} of {2}',
                emptyMsg: "没有数据！！！"

            }),
            tbar: [
                {
                    pressed: true,
                    text: "修  改",
                    icon : '../img/edit.png',
                    handler: function(){doEdit(grid,"/admin/form/add.html","修改表单")}
                },
                {
                    pressed: true,
                    icon : '../img/add.png',
                    text: "添  加",
                    handler: function(){doAdd("/admin/form/add.html","添加表单")}
                },
                {
                    pressed: true,
                    icon : '../img/delete.png',
                    text: "删  除",
                    handler: function(){doDel(grid,"/form/del",store)}
                },
                {
                    pressed: true,
                    icon : '../img/field.png',
                    text: "字段管理",
                    handler: function(){openWithTitle(grid,"/admin/form/field_index.html","字段管理")}
                },
                {
                    pressed: true,
                    icon : '../img/query.png',
                    text: "查询配置",
                    handler: function(){openWithTitle(grid,"/admin/form/field_query_index.html","查询字段配置")}
                }

            ]
        });


        var viewport = new Ext.Viewport({
                    layout: 'border',
                    renderTo: "topic-grid",
                    items: [grid]}
        );

        function doSearch(){
            store.loadPage(1,{params:searchForm.getValues()});
        }
        // trigger the data store load
        store.on('beforeload',function(store, operation,eOpts){
            operation.params= searchForm.getValues();
        },this);
        store.loadPage(1);
        window.refresh = function(){
            store.loadPage(1);
        }

        window.closeWin = function(){
            win.hide();
        }


        function openWithTitle(grid,_url,title,width,height) {
            var orows = grid.getSelectionModel().getSelection();
            if(orows.length == 0){
                Ext.MessageBox.show({title: "消息提示",
                    msg: "请选择一条记录",
                    width: 200,
                    icon: Ext.MessageBox.INFO
                });
                return;
            }
            var url = "";
            if(_url.indexOf("?")>=0){
                url = _url + "&_id="  + orows[0].data._id;
            }
            else{
                url = _url + "?_id=" + orows[0].data._id;
            }
            var new_title = orows[0].data.form_code + title;
            showHandlerWin(url,new_title,width,height);
        }

    });
</script>
<body>
<div id="topic-grid" style="height: 1024px;width:100%"></div>
<p>The js is not minified so it is readable. See <a href="panel.js">panel.js</a>.</p>
</body>
</html>